<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="extra-wrapper">
          <a-checkable-tag v-for="(item,index) in data" :key="index" :checked="current === index" @change="checked => handleChange(item, index, checked)">
            {{item.name}}
          </a-checkable-tag>
          <a-range-picker @change="onChange" :class="{'picker':true, 'showPicker':showPicker}"/>
        </div>
      </a-col>
    </a-row>
    
    <a-row>
      <a-col :span="24" class="item" style="min-height: 300px;">
        <entrance></entrance>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" class="item" style="min-height: 280px">
         <follow-up ref="followUp"></follow-up>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" class="item">
        <financial-newsletter ref="financialNewsletter"></financial-newsletter>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" class="item">
        <performance-ranking ref="performanceRanking"></performance-ranking>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" class="item">
        <business-presentation ref="businessPresentation"></business-presentation>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import Entrance from './Entrance'
  import FollowUp from './FollowUp'
  import FinancialNewsletter from './FinancialNewsletter'
  import PerformanceRanking from './PerformanceRanking'
  import BusinessPresentation from './BusinessPresentation'
  export default {
    name: "Analysis",
    components: {
      Entrance,
      FollowUp,
      FinancialNewsletter,
      PerformanceRanking,
      BusinessPresentation,
    },
    data() {
      return {
        data: [
          { name: "本月", value: 1 },
          { name: "上月", value: 2 },
          { name: "本周", value: 3 },
          { name: "上周", value: 4 },
          { name: "本季度", value: 5 },
          { name: "上季度", value: 6 },
          { name: "今年", value: 7 },
          { name: "去年", value: 8 },
          { name: "自定义时间", value: 9 }
        ],
        current: 0,
        showPicker: true,
        params: {
          'type': 1,
          'startTime': '',
          'endTime': ''
        }
      }
    },
    mounted(){
      this.getData();
    },
    methods: {
      handleChange(item, index, checked) {
        this.current = index;
        this.params.type = item.value;
        if(item.value === 9) {
          this.showPicker = false;
        } else {
          this.showPicker = true;
          this.getData();
        }
      },
      onChange(date, dateString) {
        this.params.startTime = dateString[0]
        this.params.endTime = dateString[1]
        this.getData();
      },
      getData() {
        this.$refs.businessPresentation.initData(this.params);
        this.$refs.financialNewsletter.initData(this.params);
        this.$refs.followUp.initData();
        this.$refs.performanceRanking.initData(this.params);
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '~@assets/less/common.less';
  .item {
    padding: 0 0 10px 10px;
    height: 282px;
  }
  .extra-wrapper {
    background: #ffffff;
    padding: 6px;
    margin: 0 0 10px 10px;
    border-radius: 2px;
    border-bottom: 1px solid #e8e8e8;
    transition: all 0.2s ease 0s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    line-height: 30px;
  }
  .picker {
    width: 200px;
    height: 20px;
  }
  .showPicker {
    display: none;
  }
</style>